<template>
  <div class="app_content app_content_tree">
    <div class="table_qy_tree_left" :style="{height: treeHeight}">
      <el-form>
        <el-form-item class="tree_ssk">
          <el-input placeholder="请输入关键字" type="text" class="tree_ssk_input" size="mini" v-model="treeinput"></el-input>
          <span class="icon iconfont iconsousuo tree_ssk_icon"></span>
        </el-form-item>
      </el-form>
      <div class="tree_qy">
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <el-tree :props="defaultProps"  highlight-current  :node-key="bmtree.bmm" :data="bmtree" @node-click="handleNodeClick" :default-expanded-keys="[1]" ref="bmtree">
          </el-tree>
        </el-scrollbar>
      </div>
    </div>
    <div class="table_qy table_qy_tree_right" ref="right">
      <div class="middle lb_title">部门信息</div>
      <div class="middle cxk_qy" ref="element">
        <!-- 'formInline' 为此el-form 自定义的对象  -->
        <el-form :inline="true" :model="formInlineBm" class="demo-form-inline"  >
          <el-form-item label="部门名称">
            <el-input v-model="formInlineBm.bmmc"  placeholder="部门名称" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="部门代码">
            <el-input v-model="formInlineBm.bmm"  placeholder="部门代码" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="部门序号">
            <el-input v-model="formInlineBm.pxh"  placeholder="排序号" size="mini"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"  size="mini" class="button_search" @click="updateBm()">保存</el-button>
          </el-form-item>
        </el-form>

      </div>

      <div class="table_padding">
        <div class="table_content">
          <el-tabs v-model="activeName"  >
            <el-tab-pane label="用户信息" name="first">
              <div class="middle left">
                <el-button type="" size="mini"   class="" @click="openZzjg('主职调入')">主职调入</el-button>
                <el-button type="" size="mini"   class="" @click="openZzjg('兼职调入')">兼职调入</el-button>

              </div>
              <el-table :data="tableDataBmyh"  stripe border class="table_overflow" :style="{height: scrollerHeight}">
                <el-table-column v-if="false" prop="id"></el-table-column>
                <el-table-column type="index" label="序号" width="52"></el-table-column>
                <el-table-column prop="xm" label="姓名" width="100"></el-table-column>
                <el-table-column prop="bmmc" label="所属部门" width=""></el-table-column>
                <el-table-column prop="yhzt" label="用户状态" width="80">
                  <template slot-scope="scope">
                    <span v-if="scope.row.yhzt === 0">停用</span>
                    <span v-else-if="scope.row.yhzt === 1">启用</span>
                  </template>
                </el-table-column>
                <el-table-column prop="sfzz" label="任职方式" width="80">
                  <template slot-scope="scope">
                    <span v-if="scope.row.sfzz == 0">兼职</span>
                    <span v-else-if="scope.row.sfzz == 1">主职</span>
                  </template>
                </el-table-column>
                <el-table-column prop="sjh" label="联系电话（手机）" width="140"></el-table-column>
                <el-table-column prop="dzxx" label="联系方式（邮箱）" width="140"></el-table-column>
                <el-table-column prop="" label="操作" width="120">
                  <template slot-scope="scope">           <!-- (scope.row) 为单个行对象 -->
                    <el-button size="small" @click="infoDcyh(scope.row)"  type="text" >调出</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageIn">
                <el-pagination
                    @size-change="yhhandleSizeChange"
                    @current-change="yhhandleCurrentChange"
                    :current-page="YhcurrentPage"
                    :page-sizes="[30, 50, 100, 200,500]"
                    :page-size=YhpageSize
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=Yhtotal>
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="下属部门" name="second">
              <div class="middle left">
                <el-button type="" size="mini"    @click="addBm()">新增下属部门</el-button>
                <el-button type="danger" size="mini"    @click="delBmBatch()">删除</el-button>
              </div>
              <el-table :data="tableDataBm"  stripe border class="table_overflow" @selection-change="handleSelectionChange" :style="{height: scrollerHeight}">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column type="index" label="序号" width="52"></el-table-column>
                <el-table-column prop="bmm" label="部门码" width="100"></el-table-column>
                <el-table-column prop="bmmc" label="部门名称" width=""></el-table-column>
                <el-table-column prop="fbmm" label="父部门码" width="100"></el-table-column>
                <el-table-column prop="pxh" label="排序号" width="100"></el-table-column>
                <el-table-column prop="sfejbm" label="是否二级部门" width="130">
                  <template slot-scope="scope">
                    <span v-if="scope.row.sfejbm == 0">否</span>
                    <span v-else-if="scope.row.sfejbm == 1">是</span>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageIn">
                <el-pagination
                    @size-change="bmhandleSizeChange"
                    @current-change="bmhandleCurrentChange"
                    :current-page="BmcurrentPage"
                    :page-sizes="[30, 50, 100, 200,500]"
                    :page-size=BmpageSize
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=Bmtotal>
                </el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="clear"></div>
    <add_bm_dialog ref="add_bm_dialog" @findBmListByPageFbmm="findBmListByPageFbmm"></add_bm_dialog>
    <zzjg_dialog ref="zzjg_dialog" @findYhListByBmm="findYhListByBmm" @submitZzjg="submitZzjg" ></zzjg_dialog>
  </div>
</template>

<script>
import {
  findBmList,
  findBmListByPageFbmm,
  findYhListByPageBmm,
  updateBm,
  deleteBmBatch,
  findYhListByBmm,
  drBmBatch,
  deleteYhBm
} from "@/api/app/xtgl0301/bmgl"
  import add_bm_dialog from "./add_bm_dialog";
  import zzjg_dialog from "@/app/xtgl0301/bmgl/pages/zzjg_dialog";
  export default {
    data(){
      return{
        //界面定义属性
        scrollerHeight:"",
        treeHeight:"",
        treeQyHeight:"",
        treeinput:"",
        // 表单
        formInlineBm : {
          bmm:"",
          bmmc:"",
          pxh:""
        },

        //tab标签
        activeName: 'first',

        //用户table
        tableDataBmyh:[],
        //用户分页
        YhcurrentPage:1,
        YhpageSize:100,
        Yhtotal:null,

        // 部门table
        tableDataBm:[],
        multipleSelection:[],
        //部门分页
        BmcurrentPage:1,
        BmpageSize:100,
        Bmtotal:null,
        // 部门树
        bmtree: [],
        defaultProps :{
            label: 'bmmc',
            id: 'bmm',
            children: 'children'
        },
        currentBm:"", //当前部门
      }
    },
    mounted() {                             //页面初始化加载(只在页面初始时加载一次)
      // this.findListByPage()
      // (table高度动态获取)
      let height= this.$refs.element.offsetHeight;
      this.scrollerHeight = (window.innerHeight - height - 285) + 'px';
      this.treeHeight = (window.innerHeight - 109) + 'px';
      this.treeQyHeight = (window.innerHeight - 175) + 'px';
      this.loadfirstnode();
    },
    methods:{
      //部门树点击后执行
      handleNodeClick(data) {
        this.findBmListByPageFbmm(data.bmm);
        this.findYhListByPageBmm(data.bmm);
        this.currentBm=data.bmm;
        this.formInlineBm.bmm = data.bmm;
        this.formInlineBm.bmmc = data.bmmc;
        this.formInlineBm.pxh = data.pxh;
      },
      // 加载部门树
      async loadfirstnode (resolve) {
        let data = await findBmList();
        this.bmtree = data.data.content;
      },


      // 获取部门下用户
      async findYhListByPageBmm(bmm){
        let parms ={
          bmm:bmm,
          page:this.YhcurrentPage,
          pageSize:this.YhpageSize
        }
        let data = await findYhListByPageBmm(parms)                          //请求参数路径方法为‘findListByPage’ data返回数据
        this.tableDataBmyh=data.data.content
        this.Yhtotal = data.data.pageInfo.total
      },
      yhhandleSizeChange(val) {                                               //分页
        this.YhpageSize = val;
        this.findYhListByPageBmm(this.currentBm);
      },
      yhhandleCurrentChange(val) {                                            //分页
        this.YhcurrentPage = val;
        this.findYhListByPageBmm(this.currentBm);
      },


      // 获取下属部门
      async findBmListByPageFbmm(bmm){
        let parms ={                    //axios(ajax) 请求参数
          bmm:bmm,
          page:this.BmcurrentPage,
          pageSize:this.BmpageSize
        }
        let data = await findBmListByPageFbmm(parms)                          //请求参数路径方法为‘findListByPage’ data返回数据
        this.tableDataBm=data.data.content
        this.Bmtotal = data.data.pageInfo.total
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      bmhandleSizeChange(val) {                                               //分页
        this.BmpageSize = val;
        this.findBmListByPageFbmm(this.currentBm);
      },
      bmhandleCurrentChange(val) {                                            //分页
        this.BmcurrentPage = val;
        this.findBmListByPageFbmm(this.currentBm);
      },


      //新增下属部门
      addBm() {
        if(this.currentBm==null||this.currentBm==''){
          this.$message.warning("请选择上级部门后新增 ！");
          return false;
        }
        this.$refs['add_bm_dialog'].fbmm = this.$refs.bmtree.getCurrentNode().bmm;
        this.$refs['add_bm_dialog'].show()
      },

      // 用户调入
      openZzjg(title){
        if(this.currentBm==null||this.currentBm==''){
          this.$message.warning("请选择部门后调入 ！");
          return false;
        }
        this.$refs['zzjg_dialog'].show()
        this.$refs['zzjg_dialog'].dialogTitle=title;
        this.$refs['zzjg_dialog'].bmtree=this.bmtree;
      },
      // 获取部门下所有用户（子组件调用）
      async findYhListByBmm(bmm){
        let parms ={                    //axios(ajax) 请求参数
          bmm:bmm
        }
        let data = await findYhListByBmm(parms)                          //请求参数路径方法为‘findListByPage’ data返回数据
        this.$refs['zzjg_dialog'].geneDxry(data.data.content)
      },
      // 提交调入
      submitZzjg(data){
        var sfzzdr=0;
        if(this.$refs['zzjg_dialog'].dialogTitle==='主职调入'){
          sfzzdr=1;
        }
        this.drBmBatch(data,sfzzdr)
      },
      //用户调入
      async drBmBatch(yhlist,sfzzdr){
        if(this.$refs['zzjg_dialog'].yxrytableData.length===0){
          this.$message.warning("请添加已选人员 ！");
          return false;
        }
        this.$confirm('确定将已选人员'+(sfzzdr===1?'主职':'兼职')+'调入此部门?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(async () => {
          let parms ={                    //axios(ajax) 请求参数
            sfzzdr:sfzzdr,
            yhlist:yhlist,
            bmm : this.currentBm
          }
          let data = await drBmBatch(parms);
          if (data.code === 200) {
            this.$notify({
              title: '成功',
              type: 'success',
              message: '调入成功',
              dangerouslyUseHTMLString: true,
            });
            await this.findYhListByPageBmm(this.currentBm);
             this.$refs['zzjg_dialog'].dialogVisible = false;
          } else {
            this.$notify({
              title: '失败',
              type: 'danger',
              message: '调入失败',
              dangerouslyUseHTMLString: true
            });
          }
        })
      },

      // 调出
      async infoDcyh(row){

        this.$confirm('确定要调出该用户吗?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(async () => {
          let parms = {
            id: row.id,
          }
          let data = await deleteYhBm(parms);
          if (data.code === 200) {
            this.$notify({
              title: '成功',
              type: 'success',
              message: '调出成功',
              dangerouslyUseHTMLString: true
            });
            await this.findYhListByPageBmm(this.currentBm);
          } else {
            this.$notify({
              title: '失败',
              type: 'danger',
              message: '调出失败',
              dangerouslyUseHTMLString: true
            });
          }
        })
      },
      //更新部门信息
      async updateBm () {
        this.$confirm('确定修改当前部门信息吗?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(async () => {
          let parms = {
            bmm: this.formInlineBm.bmm,
            bmmc: this.formInlineBm.bmmc,
            pxh: this.formInlineBm.pxh,
          }
          let data = await updateBm(parms);
          if (data.code === 200) {
            this.$notify({
              title: '成功',
              type: 'success',
              message: '修改成功',
              dangerouslyUseHTMLString: true
            });
            await this.loadfirstnode();
          } else {
            this.$notify({
              title: '失败',
              type: 'danger',
              message: '修改失败',
              dangerouslyUseHTMLString: true
            });
          }
        })
      },
      // 删除部门信息
      async delBmBatch(){
        console.log(this.multipleSelection);
        if(this.multipleSelection.length==0){
          this.$message.warning("请选择要删除的部门 ！");
          return false;
        }
        this.$confirm('确定删除已选部门信息吗?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(async () => {
          let param={
            jcqxBmList:this.multipleSelection
          }
          let data = await deleteBmBatch(param);
          if (data.code === 200) {
            this.$notify({
              title: '成功',
              type: 'success',
              message: '删除成功',
              dangerouslyUseHTMLString: true

            });
            await this.loadfirstnode();
            await this.findBmListByPageFbmm(this.currentBm);
          } else {
            this.$notify({
              title: '失败',
              type: 'danger',
              message: '删除失败',
              dangerouslyUseHTMLString: true
            });
          }
        })
      },



    },
    components:{                                                            //注册组件
      add_bm_dialog,
      zzjg_dialog
    }
  }

</script>

<style >
@import "../../../../styles/app0301.scss";

.left {
  height: 30px;
  width: 100%;
  text-align: left;
  font-size: 14px;
  margin-bottom: 15px;
}
</style>